<template>
  <div class="ordel">
    <div class="big">
       <div class="biao" :class="{act:cuuoon == index}" v-for="(item,index) in arr" :key="index" @click="fun(index)"> {{item}} </div>
    </div>
    
    <div class="caidan" v-for="(item,index) in str" :key="index">
      <span class="ti"> {{item.ti}} </span><span class="you">已送达</span>
      <div class="tu">
        <div class="tu1">
          <img :src=item.img alt="">
        </div>
        <div class="tu2">
          <img :src=item.img alt="">
        </div>
        <div class="jiage"> {{item.jiage}} </div>
      </div>
      <div class="zai"> {{item.zai}} </div>
    </div>
      
  </div>
</template>

<script>
var img1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1016%252Fc65f94e3j00r11whl000tc000b400b4c.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668270278&t=b7df5561ab569d5ee186da1538b7d585";
var img3 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.16pic.com%2F00%2F20%2F98%2F16pic_2098670_b.jpg&refer=http%3A%2F%2Fphoto.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668270394&t=31b2b203c3cded193ac60aab40c0bddd";
var img2 ="https://img1.baidu.com/it/u=325435795,1744055315&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
export default {
  data(){
    return{
      arr:["全部","待消费","待评价","退款"],
      cuuoon:0,
      str:[
        {ti:"纯手工饺子（凤城9路店）",img:img1,jiage:"￥17.9",zai:"再来一单"},
        {ti:"唐久便利店（海荣明城店）",img:img3,jiage:"￥18.3",zai:"再来一单"},
        {ti:"美益水果店（北美店）",img:img2,jiage:"￥28.89",zai:"再来一单"},
        {ti:"美益水果店（北美店）",img:img2,jiage:"￥28.89",zai:"再来一单"},
      ],
    }
  },
  methods:{
    fun(index){
      this.cuuoon = index;

    }
  }

}
</script>

<style lang="scss" scoped>
*{
  margin: 0;padding: 0;
}
.big{
  display: flex;
}
.big .biao{
  margin: 30px 10px 10px;
}
.big .act{
  font-weight: bold;
  font-size: 16px;
}
.caidan{
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f0f0f0;
  margin: 5px 0px;
  border-radius: 20px;
}
.caidan .tu{
  display: flex;
  margin: 3px 0px;
}
.caidan .tu .tu1 img{
  width: 80px;
  height: 60px;
  border-radius: 10px;
}
.caidan .tu .tu2 img{
  width: 80px;
  height: 60px;
  border-radius: 10px;
}
.caidan .you{
  position: absolute;
  right: 0px;
}
.caidan .jiage{
  position: absolute;
  right: 0px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}
.caidan .zai{
  width: 75px;
  height: 24px;
  background-color: rgb(62, 145, 240);
  border-radius: 10px;
  text-align: center;
  line-height: 24px;
  position: absolute;
  right: 5px;
  top: 164px;
}



</style>